<template>
  <CommonDialog v-model="visible" :loading="loading" :title="`${dictionaryId ? '编辑' : '创建'}字典项`" :width="640"
    @submit="submit" @cancel="cancel">
    <Form ref="formEl" :model="formData" :rules="rules" :label-width="140">
      <FormItem label="名称" prop="name">
        <Input v-model="formData.name" placeholder="请输入名称" />
      </FormItem>

      <FormItem label="代码" prop="code">
        <Input v-model="formData.code" placeholder="请输入代码" />
      </FormItem>

      <FormItem label="英文版名称" prop="usname">
        <Input v-model="formData.usname" placeholder="请输入英文版名称" />
      </FormItem>

      <FormItem label="繁体版名称" prop="tcname">
        <Input v-model="formData.tcname" placeholder="请输入繁体版名称" />
      </FormItem>

      <FormItem label="图标" prop="iconstr">
        <Input v-model="formData.iconstr" placeholder="请输入图标代码" />
      </FormItem>

      <FormItem label="图标类型">
        <Select v-model="formData.ctype" transfer placeholder="请选择图标类型" filterable clearable>
          <Option v-for="item in ICON_TYPE_OPTIONS" :value="item.value" :key="item.value">
            {{item.label}}
          </Option>
        </Select>
      </FormItem>

      <FormItem label="排序位置" prop="sortindex">
        <InputNumber :min="1" :max="200" v-model="formData.sortindex" />
      </FormItem>

      <FormItem label="颜色" prop="iconskin">
        <Input v-model="formData.iconskin" placeholder="请输入颜色" />
      </FormItem>

      <FormItem label="显示代码">
        <Switch v-model="formData.discode" size="large" :true-value="1" :false-value="0">
          <template #open>
            <span>启用</span>
          </template>
          <template #close>
            <span>禁用</span>
          </template>
        </Switch>
      </FormItem>

      <FormItem label="说明">
        <Input v-model="formData.description" type="textarea" placeholder="请输入说明" :rows="4"/>
      </FormItem>

      <FormItem label="区分租户">
        <Switch v-model="formData.tenant" size="large" :true-value="1" :false-value="0">
          <template #open>
            <span>是</span>
          </template>
          <template #close>
            <span>否</span>
          </template>
        </Switch>
      </FormItem>
    </Form>
  </CommonDialog>
</template>

<script setup>
import { ref } from 'vue'
import { Message } from 'view-ui-plus'

import { ICON_TYPE_OPTIONS } from '@/util/conf'

import { dictionary } from '@/api/modules/modelSetting'

const props = defineProps({
  rowData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const emit = defineEmits(['cancel', 'submit'])

// 是否打开弹窗
const visible = ref(true)

// 加载状态
const loading = ref(false)

// 元数据ID
const dictionaryId = ref(undefined)
// 表单元素ref
const formEl = ref(null)
// 表单数据
const formData = ref({
  name: '', //名称
  code: '', //代码
  usname: '', //英文版名称
  tcname: '', //繁体版名称
  iconstr: '', //图标代码
  iconskin: '', //颜色
  sortindex: 1, //排序序号
  ctype: '', //图标类型
  discode: 0, //显示代码
  description: '', //说明
  tenant: 0 //区分租户
})

// 表单校验条件
const rules = ref({
  name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
  code: [{ required: true, message: '请填写代码', trigger: 'blur' }]
})

/**
 * 提交表单
 */
const submit = async () => {
  let valid = await formEl.value.validate()
  if (!valid) return

  loading.value = true

  try {
    const params = {
      ...formData.value,
      id: dictionaryId.value,
      parentid: props.rowData.id
    }

    await dictionary[dictionaryId.value ? 'edit' : 'add']({
      data: params
    })

    Message.success('操作成功')
    emit('submit')
  } catch (error) {
    console.error(error)
  }

  loading.value = false
}

/**
 * 取消表单
 */
const cancel = () => {
  visible.value = false
  emit('cancel')
}

const getDetailData = () => {
  loading.value = true

  dictionary
    .detail({
      data: {
        id: dictionaryId.value
      }
    })
    .then(({ data }) => {
      for (const key in formData.value) {
        if (typeof data[key] === 'boolean' || ['0', '1'].includes(data[key]) || data[key] === null) {
          formData.value[key] = +data[key]
          continue
        }

        formData.value[key] = data[key]
      }
    }).finally(()=>{
      loading.value = false
    })
}

/**
 * 初始化对话框
 */
const initDialog = id => {
  // 显示对话框
  visible.value = true

  dictionaryId.value = id

  if (id) {
    getDetailData()
  }
}

defineExpose({
  initDialog
})
</script>

<style scoped lang="scss">
.ivu-form {
  height: 600px;
  overflow-y: auto;
}
.flex-form {
  display: flex;
}
.ivu-input-wrapper,
.ivu-select {
  width: 240px;
}
::deep(.ivu-form-item-label) {
  text-align: right;
}
</style>